<template>
	<scroll-view class="vf-navbar-box" :style="boxStyle" :scroll-x="true" :scroll-left="scrollLeft" scroll-with-animation>
    <text 
      class="item" 
      v-for="(item, index) in navs" 
      :key="item.id" 
      :style="(current == index ? useActiveStyle : useItemStyle) + (widths[index] ? ';width: ' + widths[index] + 'px;text-align:center;' : ';padding: 0 ' + itemPadding + 'rpx;')" :class="{active: index == current}" 
    @click="_click(index)">{{ item.name }}</text>
    <view class="line" :style="useLineStyle"></view>
  </scroll-view>
</template>

<script>
	export default {
		props:{
			navs: {  // navs数组
				type: Array,
				default() {
					return [];
				}
			},
      boxStyle: {
        type: String,
        default: ''
      },
      lineStyle: {
        type: String,
        default: ''
      },
			current: {  // 当前位置
				type: [Number, String],
				default: 0
			},
			itemStyle: {  // 未选中样式
				type: String,
				default: ''
			},
			activeStyle: { // 当前选中样式
				type: String,
				default: ''
			},
      itemPadding: {   // item的左右padding
        type: [String, Number],
        default: 24
      },
			fill: {   // 是否使用撑满模式
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
        boxWidth: 750,
        boxHeight: uni.upx2px(66),
				widths: [],
				lineWidths: [],
				lineLefts: [],
			}
		},
		watch:{
			navs: {
        immediate: true,
        handler: function(news, olds) {
          if(news.length !== this.lineWidths.length) {
            this.$nextTick(function(){
              this.getRect();
            })   
          }
        }
      },
      current() {
        if(this.navs.length !== this.lineWidths.length) {
          this.$nextTick(function(){
            this.getRect();
          })   
        }
      }
		},
		computed:{
      useLineStyle() {
        let style = this.lineStyle + ';left:' + this.lineLefts[this.current] + 'px;';
        if(style.indexOf('width:') === -1) style += 'width:' + this.lineWidths[this.current] + 'px';
        return style;
      },
      useItemStyle() {
        return this.itemStyle + ';height: ' + this.boxHeight + 'px; line-height: ' + this.boxHeight + 'px';
      },
      useActiveStyle() {
        return this.activeStyle + ';height: ' + this.boxHeight + 'px; line-height: ' + this.boxHeight + 'px';
      },
      scrollLeft() {
        return this.lineLefts[this.current] - this.boxWidth / 2;
      }
		},
		methods:{
      
      // 计算位置
      getRect() {
        if(!this.navs.length) return;
        const selector = uni.createSelectorQuery().in(this);
        selector.selectAll('.vf-navbar-box, .item, .line').fields({size: true});
        selector.exec(data => {
          if(!data[0]) return;
          const padding = uni.upx2px(this.itemPadding);
          const rect = data[0];
          this.boxWidth = rect[0].width;
          this.boxHeight = rect[0].height;
          const lineWidth = rect[rect.length - 1].width;
          const itemList = rect.slice(1, -1);
          let lineLeft = 0;
          itemList.forEach(item => {
            const width = lineWidth || item.width / 2 - padding;
            this.lineWidths.push(width);
            if(this.fill) item.width = this.boxWidth / itemList.length;
            const left = lineLeft + (item.width - width) / 2;
            lineLeft += item.width;
            this.lineLefts.push(left)
            this.widths.push(item.width)
          });
        });
      },
      
			_click(index) {
				this.$emit('click', index);
			}
		}
	}
</script>

<style lang="scss" scoped>

$height: 66rpx;

.vf-navbar-box{
  /* #ifdef APP-NVUE */
  flex: 1;
  /* #endif */
  /* #ifndef APP-NVUE */
  width: 100%;
  /* #endif */
  height: $height;
  white-space: nowrap; 
  position: relative;
}

.item{
  height: $height;
  line-height: $height;
  display: inline-block;
  color: #999;
  font-size: 26rpx;
}
.active{
  color: $main-color;
}

.line {
  height: 8rpx;
  background-color: $main-color;
  border-radius: 8rpx;
  position: absolute;
  bottom: 4rpx;
  transition-property: left, width;
  transition-duration: 0.3s;
  transition-timing-function: linear;
}
</style>
